<template>
	<view class="box">
		<view class="box-body">
			<u--form class="information" labelPosition="left" :model="model1.userInfo" :rules="rules" ref="uForm">
				<view class="trueName">  
					<u-form-item label="姓名" prop="trueName">
						<u--input v-model="model1.userInfo.trueName" border="none" placeholder="请输入收货人姓名" class="userInfo_trueName"></u--input>
					</u-form-item>
				</view>
				<view class="telephone">
					<u-form-item label="电话" prop="telephone">
						<u--input v-model="model1.userInfo.telephone" border="none" placeholder="请输入收货人电话" class="userInfo_telephone"></u--input>
					</u-form-item>
				</view>
				<view class="location">
					<u-form-item label="所在地区" labelWidth="80px" prop="location"  class="item_location" @click="show = true;">
						<u--input border="none" placeholder="请选择所在地区" class="userInfo_location" v-model="model1.userInfo.location" disable=disable></u--input>
					</u-form-item>
				</view>
				<view class="detailedAddress">
					<u-form-item label="详细地址" labelWidth="80px" prop="detailedAddress"  class="item_detailedAddress">
						<u--input border="none" placeholder="请输入详细地址" class="userInfo_detailedAddress" v-model="model1.userInfo.detailedAddress"></u--input>
						<u-icon name="map-fill" size="20" class="dingIcon" @click="goLocation"></u-icon>
						<text class="dingwei" @click="goLocation">定位</text>
					</u-form-item>
				</view>
				<view class="selectedByDefault">
					<u-checkbox-group placement="column" @change="checkboxChange">
						<u-checkbox
							:customStyle="{marginBottom:'8px'}"
							:label="checkboxList.name"
							:name="checkboxList.name"
							:checked="true"
							activeColor="#1BBC9B"
							@change="changeCheck"
						></u-checkbox>
					</u-checkbox-group>
				</view>
				<u-picker 
					:show="show" 
					ref="uPicker" 
					:loading="loading" 
					:columns="columns" 
					@confirm="confirm" 
					@change="changeHandler"
					@close="close"
					@cancel="cancel"
				></u-picker>
				<u-button color="#1BBC9B" @click="formsubmit" class="customStyle">确定</u-button>
			</u--form>
		</view>
	</view>
</template>

<script>
	import {selectJsRegion} from "@/static/http/getData.js"
	
	import {addUserAddress} from "@/static/http/getData.js"
	
	import {updateUserNoDefault} from "@/static/http/getData.js"
	
	export default{
		data(){
			return{
				model1:{
					userInfo:{
						trueName:"",//收货人
						telephone:"",//电话号码
						location:"",//地址
						detailedAddress:"",//具体地址
						longitude:"",//经度
						latitude:""//纬度
					}
				},
				show:false,
				loading:false,
				columns:[
					[],
					[],
					[]
				],
				rules:{
					'trueName':{
						required:true,
						message:'请输入收货人姓名'
					},
					'telephone':[{
						required:true,
						message:'请输入手机号码'
					},{
						pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
						message:'手机号码格式不正确'
					}],
					'location':{
						required:true,
						message:'请选择所在所在地区'
					},
					'detailedAddress':{
						required:true,
						message:"请输入详细地址"
					}
				},
				checkboxList:{
					name:'默认',
					disabled:false
				},
				province:[],
				city:[],
				area:[],
				provinceNum:"",
				cityNum:"",
				areaNum:"",
				isDefault:"true"
			}
		},
		onLoad(){
			this.selectJsRegionProvince(0);
		},
		methods:{
			//三级联动(省)
			selectJsRegionProvince(parentCode){
				var data1={
					parentCode:parentCode
				};
				this.columns[0].length=0;
				//第一次查询（查出省）
				selectJsRegion(data1).then(res=>{
					//将查询的数据临时存放在cloummnss
					var cloumnss = res.data.data;
					//对res.data.data进行变量(省)
					res.data.data.forEach((item,index) => {
						//将遍历出来的省的名字存放在columns的第一个数组中(省)
						this.columns[0].push(item.name);
						//将值进行返回
						return item;
					})
					//将res.data.data存放在province（省）数组中（省）
					this.province = res.data.data;
					this.provinceNum=cloumnss[0].regionId;
					this.selectJsRegionCity(cloumnss[0].regionId);
				})
			},
			//三级联动（市）
			selectJsRegionCity(parentCode){
				var data2= {
					//对第一次查询出来的省，查询出对应的区或市
					//拿到展示出来的省的regionId,查询出对应的子级区或市
					parentCode:parentCode,
				};
				this.columns[1].length=0;
				//开始第二次查询（区、市）
				selectJsRegion(data2).then(res=>{
					//将res.data.data临时存放在cloumnss中
					var cloumnss = res.data.data;
					//对查出来的区或市进行遍历
					res.data.data.forEach((item,index) => {
						//将遍历出来的区或市的名字存放在columns的第二个数组中(存放的是市、区)
						this.columns[1].push(item.name);
						return item;
					})
					//将查出的区、市的数据存在在city数组中
					this.city = res.data.data;
					this.cityNum=cloumnss[0].regionId;
					this.selectJsRegionArea(cloumnss[0].regionId);
				})	
			},
			//三级联动（县）
			selectJsRegionArea(parentCode){
				var data3= {
					//第一次查询出来的区、市的reginonId,查询出对应的区、县
					//拿到的区、市的regionId，查询到对应的区、县
					parentCode:parentCode,
				};
				this.columns[2].length=0;
				//开始第三次查询
				selectJsRegion(data3).then(res=>{
					//将查询出来的区、县临时存放在cloumnss中
					var cloumnss = res.data.data;
					//对refionId进行初始化（设置初始值 0）
					//var regionId = 0;
					//将查出的区、县进行遍历
					res.data.data.forEach((item,index) => {
						//将遍历出来的区、县进行遍历
						this.columns[2].push(item.name);
						return item;
					})
					if(cloumnss[0]==undefined){
						this.areaNum = null;
					}else{
						this.areaNum = cloumnss[0].regionId;
					}
					//将查询出来的区、县存放在area数组中
					this.area = res.data.data;
				})
			},
			//对三级联动进行监听
			changeHandler(e){
				//展示出监听的联动的详细数据
				const{
					columnIndex,//数组的下标
					values,//此数据的内容
					index,//此数据在数组中所对应的下标
					picker = this.$refs.uPicker.value //uPocker是三级联动的refs名字
				} = e
				//拿到产生变动的数据的所对应的数组中下标
				var itemIndex = e.index;
				//对产生变化的联动所在的数组进行判断
				//判断产生变化的联动所在的数组是否是0(也就是省级数组)
				if(e.columnIndex == 0){
					//拿到产生变化的数组中所对应的数组下标，将这个数组下标进行传递
					this.selectJsRegionCity(this.province[itemIndex].regionId);
				//判断产生变化的数据的columnIndex否是1（也就是区、市级目录）
				}else if(e.columnIndex == 1){
					this.selectJsRegionArea(this.city[itemIndex].regionId);
				}
				//没有判断县因为它没有再下一级了
			},
			//确定
			confirm(e){
				//将picker隐藏
				this.show = false;
				//查出来的e.value是个Array，省、市、县分别用3个索引存储的
				//这里的e.value[2]查询的是县的数据是否是undefined,(直辖市只有两级的目录（省、区）)
				if(e.value[2]==undefined){
					//将数据进行拼接
					this.model1.userInfo.location=e.value[0]+" "+e.value[1];
				}else{
					//将数据进行拼接
					this.model1.userInfo.location=e.value[0]+" "+e.value[1]+" "+e.value[2];
				}
				
			},
			//取消
			cancel(){
				this.show = false;
			},
			//监听复选框
			checkboxChange(n){
				//console.log('change',n)
			},
			//提交
			formsubmit(e){
				this.$refs.uForm.validate().then(res => {
					var isDefault = 2;
					if(this.isDefault==false){
						isDefault = 3;
					};
					var data2={
						userId:89,
						recipientName:this.model1.userInfo.trueName,
						contactNumber:this.model1.userInfo.telephone,
						province:this.provinceNum,
						city:this.cityNum,
						area:this.area,
						specificAddress:this.model1.userInfo.detailedAddress,
						//longitude:this.model1.userInfo.longitude,
						//latitude:this.model1.userInfo.latitude,
						isDefault:isDefault
					};
				
					if(this.isDefault==false){
						addUserAddress(data2).then(res=>{
							if(res.data.data==true){
								uni.showToast({
									icon:"success",
									title:"添加地址成功",
									duration:2000
								});
								this.$router.back();
							}else{
								uni.showToast({
									icon:"error",
									title:"添加地址失败",
									duration:2000
								});
								this.$router.back();
							}
						})
					}else{
						var data1={
							userId:89,
							isDefaultt:3
						};
						updateUserNoDefault(data1).then(res=>{
							if(res.data.data==true){
								addUserAddress(data2).then(res=>{
									if(res.data.data==true){
										uni.showToast({
											icon:"success",
											title:"添加地址成功",
											duration:2000
										});
										this.$router.back();
									}else{
										uni.showToast({
											icon:"error",
											title:"添加地址失败",
											duration:2000
										});
										this.$router.back();
									}
								})
							}
						})
					}
				})
			},
			//定位位置
			goLocation(){
				uni.navigateTo({
					url:"/pages/shopping/location"
				})
			},
			changeCheck(e){
				this.isDefault = e;
			}
		}
	}
</script>

<style>
	*{
		margin:0;
		padding:0;
	}
	
	.box{
		width:100%;
		height:100%;
	}
	
	.box-body{
		width:100%;
		height:400px;
	}
	.box-body .information .trueName,.telephone,.location,.detailedAddress{
		margin:20px auto;
		width:90%;
		height:50px;
		line-height:30px;
		padding-left:20px;
		background-color: #FFFFFF;
		border-radius:10px;
	}
	.box-body .information .detailedAddress .dingIcon{
		margin-left:20px;
	}
	.box-body .information .detailedAddress .dingwei{
		margin-right:20px;
	}
	.box-body .information .selectedByDefault{
		margin:20px auto;
		width:90%;
		height:30px;
		padding-top:10px;
		padding-left:20px;
		background-color: #FFFFFF;
		border-radius:10px;
	}
	.customStyle{
		margin:0 auto;
		width:90%;
		height:50px;
		background-color:"#1BBC9B"
	}
</style>
